<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0525-JS作业2排序-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{margin: 0;}
		ul,ol{padding: 0;list-style: none;}
		i{font-style: normal;}
		a{text-decoration: none;}
		.clearfix:after{
			display: block;
			clear: both;
			content: "";
		}
		.wrap{
			width: 1002px;
			margin: 0 auto;
			background-color: #fff;
		}
		header{
			position: relative;
			z-index: 5;
			width: 1000px;
			height: 40px;
			margin: 10px 0;
			border: 1px solid #ccc;
			background-color: #f8f8f8;
		}
		header .nav{
			font-size: 0;
		}
		header .nav li{
			display: inline-block;
			margin: 0 15px;
			padding: 0 15px;
			font-size: 12px;
			line-height: 40px;
		}
		header .nav li:nth-child(4){
			position: relative;
			cursor: pointer;
		}
		header .nav li:nth-child(4):hover{
			color: #f00;
		}
		header .cover{
			display: none;
			position: absolute;
			top: -1px;
			left: -5px;
			width: 110px;
			height: 80px;
			border: 1px solid #ccc;
			background-color: #fff;
		}
		header .cover li{
			width: 100%;
			margin: 0;
			padding: 0;
			font-size: 12px;
			line-height: 40px;
			text-align: center;
			cursor: pointer
		}
		header .cover li:hover{
			color: #f00;
		}
		.item_box{
			position: relative;
			z-index: 1;
		}
		.item_box .list{
			width: 1002px;
			padding: 0 10px;
			box-sizing: border-box;
		}
		.item_box .list li{
			position: relative;
			float: left;
			width: 220px;
			height: 250px;
			margin: 5px 12px 15px;
			padding: 10px 0 0 10px;
			border: 1px solid #ccc;
			color: #777;
			font-size: 14px;
			line-height: 40px;
			box-sizing: border-box;
		}
		.item_box .list img{
			width: 200px;
			height: 200px;
			vertical-align: top;
		}
		.item_box .list span{
			position: absolute;
			right: 2px;
			bottom: 2px;
			width: 50px;
			height: 50px;
			background: url("images/price.png") no-repeat;
			font-size: 16px;
			color: #ffe700;
			line-height: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<header>
			<ul class="nav">
				<li>流行</li>
				<li>热销</li>
				<li>上新</li>
				<li>
					<span>价格</span>
					<ul class="cover">
						<li>价格从低到高</li>
						<li>价格从高到低</li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="item_box">
			<ul class="list clearfix">
				<li>
					<img src="images/xh_img1.jpg" alt="图片">
					<p>默认位置1</p>
					<span>￥<i>500</i></span>
				</li>
				<li>
					<img src="images/xh_img2.jpg" alt="图片">
					<p>默认位置2</p>
					<span>￥<i>100</i></span>
				</li>
				<li>
					<img src="images/xh_img3.jpg" alt="图片">
					<p>默认位置3</p>
					<span>￥<i>300</i></span>
				</li>
				<li>
					<img src="images/xh_img4.jpg" alt="图片">
					<p>默认位置4</p>
					<span>￥<i>700</i></span>
				</li>
				<li>
					<img src="images/xh_img5.jpg" alt="图片">
					<p>默认位置5</p>
					<span>￥<i>130</i></span>
				</li>
				<li>
					<img src="images/xh_img6.jpg" alt="图片">
					<p>默认位置6</p>
					<span>￥<i>215</i></span>
				</li>
				<li>
					<img src="images/xh_img7.jpg" alt="图片">
					<p>默认位置7</p>
					<span>￥<i>97</i></span>
				</li>
				<li>
					<img src="images/xh_img8.jpg" alt="图片">
					<p>默认位置8</p>
					<span>￥<i>99.5</i></span>
				</li>
			</ul>
		</section>
	</section>
</body>
<script>
	var oHeader = document.getElementsByTagName('header')[0],
		oBtn0 = oHeader.getElementsByTagName('li')[3],
        oCover = oHeader.getElementsByTagName('ul')[1],
		oBtn1 = oCover.getElementsByTagName('li')[0],
        oBtn2 = oCover.getElementsByTagName('li')[1],
		oList = document.getElementsByClassName('item_box')[0].getElementsByTagName('ul')[0],
		oLi = oList.getElementsByTagName('li'),
        oLiL = oLi.length,
		oNot = ['价格从低到高','价格从高到低'],
		aPri = [];

	for(var i=0;i<oLiL;i++){//将每个商品的 价格 名称 图片地址 取出 遍历生成aPri
        aPri.push({
	        pri:oLi[i].getElementsByTagName('i')[0].innerHTML-0,
            name:oLi[i].getElementsByTagName('p')[0].innerHTML,
            img:oLi[i].getElementsByTagName('img')[0].src
        });
	}
	
	oBtn0.onmouseenter = function(){//鼠标经过价格按钮 显示浮层
	    oCover.style.display = 'block';
	};
    oBtn0.onmouseleave = function(){//鼠标离开价格按钮 显示浮层
        oCover.style = '';
    };

    oBtn1.onclick = function(){//点击从低到高按钮
        fnCo();//隐藏浮层 改变字体颜色
        oBtn0.getElementsByTagName('span')[0].innerHTML = oNot[0];
        aPri = aPri.sort(function(a,b){//将原aPri的元素按照pri的数值从小到大排序重新生成aPri
        	return a.pri-b.pri;
        });
        fnRw();//改变排序
    };

    oBtn2.onclick = function(){//点击从高到低按钮
        fnCo();//隐藏浮层 改变字体颜色
        oBtn0.getElementsByTagName('span')[0].innerHTML = oNot[1];
        aPri = aPri.sort(function(a,b){//将原aPri的元素按照pri的数值从大到小排序重新生成aPri
            return b.pri-a.pri;
        });
        fnRw();//改变排序
    };
	
    //通用函数1 隐藏浮层 改变字体颜色
    function fnCo(){
        oCover.style = '';
        oBtn0.style.color = '#f00';
    }
    //通用函数2 改变排序
    function fnRw(){
        for(var i=0;i<oLiL;i++){//将重新排序后的 价格 名称 图片地址 写入对应商品标签内
            oLi[i].getElementsByTagName('i')[0].innerHTML = aPri[i].pri;
	        oLi[i].getElementsByTagName('p')[0].innerHTML = aPri[i].name;
            oLi[i].getElementsByTagName('img')[0].src = aPri[i].img;
        }
    }
</script>
</html>